<template>
  <div class="sysinfo">
    <!-- Sysinfo page -->
    <!-- {{ getMemoryInfo() }} -->
    <CpuInfo
      class="chart"
      :logicalMsg="this.cpuInfo.logicalMsg"
      :physicalMsg="this.cpuInfo.physicalMsg"
      :core_rate="this.cpuInfo.core_rate"
      ></CpuInfo>
    <v-chart class="chart" :option="getMemoryInfo()" />
    <v-chart class="chart" :option="getDiskInfo()" />
    <NetworkInfo
      class="chart"
      :rate='this.networkInfo.rate'
    ></NetworkInfo>
    <!-- <v-chart class="chart" :option="option" /> -->
    <!-- <v-chart class="chart" :option="option_2" /> -->
  </div>
</template>

<script>
import 'echarts/lib/component/polar'
import 'echarts/lib/chart/line'
// import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'

import apiConfig from '@/api/apiConfig'
import CpuInfo from '@/components/CpuInfo'
import NetworkInfo from '@/components/NetworkInfo'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

export default {
  name: 'HelloWorld',
  components: {
    VChart,
    CpuInfo,
    NetworkInfo
  },
  provide: {
    [THEME_KEY]: 'light'
  },
  data () {
    return {
      SysData: null,
      DynamicData: null,
      MemoryInfo: {
        textStyle: {
          fontFamily: '"Helvetica Neue", Arial, sans-serif'
        },
        title: {
          text: '内存信息',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['total', 'available', 'used', 'free']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              // { value: 335, name: 'total' },
              // { value: 310, name: 'available' },
              // { value: 234, name: 'used' },
              // { value: 135, name: 'free' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      DiskInfo: {
        textStyle: {
          fontFamily: '"Helvetica Neue", Arial, sans-serif'
        },
        title: {
          text: '内存信息',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['total', 'available', 'used', 'free']
        },
        series: [
          {
            name: '内存信息',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: 'total' },
              { value: 310, name: 'available' },
              { value: 234, name: 'used' },
              { value: 135, name: 'free' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      option: {
        title: {
          text: '动态数据 + 时间坐标轴'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            params = params[0]
            var date = new Date(params.name)
            return (
              date.getDate() +
              '/' +
              (date.getMonth() + 1) +
              '/' +
              date.getFullYear() +
              ' : ' +
              params.value[1]
            )
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: {}
          }
        ]
      },
      cpuInfo: {
        logicalMsg: null,
        physicalMsg: null,
        core_rate: null
      },
      networkInfo: {
        rate: []
      },
      interval: null
    }
  },
  methods: {
    getData: async function () {
      const conf = apiConfig.admin.getInfo('post')
      const data = await this.$axios(conf)
      if (data.data.status === 200) {
        this.SysData = data.data
      }
    },
    async getDynamicInfo () {
      try {
        const conf = apiConfig.admin.getInfo('get')
        const data = await this.$axios(conf)
        this.DynamicData = data.data
      } catch (error) {
        console.log(error)
      }
    },
    getMemoryInfo () {
      const data = this.SysData
      if (data === null) {
        return
      }
      const tpmInfo = this.MemoryInfo
      const arrs = []
      for (const item in data.data.memoryInfo) {
        const i = {
          name: item,
          value: data.data.memoryInfo[item]
        }
        if (item !== 'percent' && item !== 'total' && item !== 'available') {
          arrs.push(i)
        }
      }
      tpmInfo.title.text = '内存占用'
      tpmInfo.series[0].name = '内存信息'
      tpmInfo.series[0].data = arrs
      return tpmInfo
    },
    getDiskInfo () {
      const data = this.SysData
      if (data === null) {
        return
      }
      const tpmInfo = this.DiskInfo
      const arrs = []
      for (const item of data.data.diskInfo) {
        if (item.mountPoint === '/') {
          for (const i in item.disk_usage) {
            const tmp = {
              name: i,
              value: item.disk_usage[i]
            }
            if (i !== 'percent' && i !== 'total') {
              arrs.push(tmp)
            }
          }
        }
      }
      tpmInfo.title.text = '硬盘占用'
      tpmInfo.series[0].name = 'Hard disk Info'
      tpmInfo.series[0].data = arrs
      return tpmInfo
    },
    getCpuInfo () {
      const data = this.SysData
      this.cpuInfo.logicalMsg = data.data.cpuInfo.logical
      this.cpuInfo.physicalMsg = data.data.cpuInfo.physical
    },
    runDynamicInfo () {
      const dynamicData = this.DynamicData
      this.cpuInfo.core_rate = dynamicData.data.cpu_core_rate
      this.networkInfo.rate = this.DynamicData.data.network_rate
    }
  },
  async mounted () {
    await this.getData()
    await this.getDynamicInfo()
    this.runDynamicInfo()
    this.getCpuInfo()
    this.$nextTick(() => {
      this.interval = setInterval(async () => {
        await this.getDynamicInfo()
        this.runDynamicInfo()
      }, 2500)
    })
  },
  beforeRouteLeave (to, from, next) {
    clearInterval(this.interval)
    next()
  },
  beforeDestroy () {
    console.group('beforeDestroy 销毁前')
    clearInterval(this.interval)
  }
}
</script>

<style lang="less" scoped>

.chart {
  height: 400px;
  width: 400px;
  margin: 15px;
}

.sysinfo {
  display: flex;
  width: 100vw;
  padding-top: 15px;
  align-items: center;
  justify-content: space-around;
  flex-flow: row wrap;
}
</style>
